<template>
  <div>
    <Backnav backTitle="申请退货"></Backnav>
    <div class="section">
      <div class="title"><strong>商品信息</strong></div>
      <div class="storeTitle">
        <div><img :src="orderInfo.storeImg" alt="" /></div>
        <div>{{ orderInfo.storeName }}</div>
      </div>
      <div class="orders" v-for="item in orderInfo.product" :key="item.id">
        <div class="productImg"><img :src="item.thumb" alt="" /></div>
        <div class="info">
          <div>{{ item.title }}</div>
          <div>{{ orderInfo.specify }} <span>x{{item.id}}</span></div>
          <div>￥{{ 187 }}</div>
        </div>
        <div class="cheack">
          <van-checkbox
            v-model="item.checked"
            checked-color="#4bd863"
            shape="square"
          ></van-checkbox>
        </div>
      </div>

      <div class="select" @click="goApplyMoney">
        <div>仅退货</div>
        <div><van-icon name="arrow" /></div>
      </div>
      <select name="" id="">
        <option value="1">仅退货</option>
        <option value="1">退货退款</option>
        <option value="1">仅退款</option>
      </select>
    </div>
  </div>
</template>

<script>
import Backnav from "../../components/nav/Backnav.vue";
export default {
  components: { Backnav },
  data() {
    return {
      storeName: "剥壳者商城",
      orderInfo: {
        id: "1",
        storeName: "剥壳者商城",
        orderState: "卖家处理中",
        state: "6",
        num: "30",
        specify: "独立包装(1个装)",
        storeImg: "https://img01.yzcdn.cn/vant/ipad.jpeg",
        orderNumber: new Date().getTime(),
        product: [
          {
            id: "1",
            price: "3.5",
            desc: "甜得很",
            checked: false,
            title: "黑美人西瓜",
            thumb: "https://img01.yzcdn.cn/vant/ipad.jpeg",
          },
          {
            id: "2",
            price: "3.5",
            desc: "甜得很",
            checked: false,
            title: "脆皮西瓜",
            thumb: "https://img01.yzcdn.cn/vant/ipad.jpeg",
          },
        ],
        allMoney: "10.5",
      },
    };
  },
  methods: {
    goApplyMoney() {
      this.$router.push('/applymoney')
    },
  },
};
</script>

<style lang="less" scoped>
.section {
  font-size: 14px;
  margin-top: 3.125rem;
  height: 200px;
  .title {
    background-color: #f2f2f2;
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
    font-size: 14px;
  }
  .storeTitle {
    height: 30px;
    line-height: 30px;
    border-bottom: 0.5px solid rgba(223, 223, 223, 0.877);
    display: flex;
    font-size: 13px;
    padding: 2px 10px;
    > div:first-child {
      height: 25px;
      line-height: 25px;
      width: 25px;
      padding: 2.5px 0;
      border-radius: 10px;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .orders {
    display: flex;
    // justify-content: space-between;
    align-content: center;
    height: 80px;
    width: calc(100%-20px);
    padding: 10px;
    border-bottom: 0.5px solid rgba(230, 230, 230, 0.76);
    .productImg {
      height: 80px;
      width: 20%;
      img {
        width: 100%;
        height: 100%;
      }
    }

    .info {
      width: 60%;
      margin-left: 5%;
      font-size: 14px;
      // display: flex;
      // flex-direction: column;
      // align-content: center;
      div {
        margin: 2px 0;
        font-size: 13px;
      }
      div:nth-child(2) {
        background-color: #f2f2f2;
        height: 26px;
        line-height: 26px;
        display: inline-block;
        padding: 2px;
        border-radius: 5px;
      }
      div:last-child {
        color: red;
        font-weight: 800;
      }
    }
    .cheack {
      width: 10%;
      height: 80px;
      display: flex;
      align-content: center;
      justify-content: center;
      line-height: 80px;
    }
  }
  .select {
    height: 30px;
    padding: 5px 10px;
    line-height: 30px;
    margin-top: 20px;
    border-left: none !important;
    border-top: 0.5px solid rgb(211, 208, 208);
    border-bottom: 0.5px solid rgb(211, 208, 208);
    div:first-child {
      float: left;
    }
    div:last-child {
      float: right;
    }
  }
  select {
    width: 100%;
    height: 30px;
    padding: 5px 10px;
    line-height: 30px;
    margin-top: 20px;
    border-top: 0.5px solid rgb(211, 208, 208);
    border-bottom: 0.5px solid rgb(211, 208, 208);
  }
}
</style>